import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import './xxAddressInput.scss';
import BreadCrumb from "@/components/BreadCrumb";
import { ElInput, ElMessageBox } from "element-plus";
import { UserInfo } from "@/components/UserInfo";
import Keyboard from "@/components/keyboard";

export default defineComponent({
    setup() {
        const router = useRouter();
        const inputValue = ref('');
        const addressInputRef = ref<InstanceType<typeof ElInput> | null>(null);
        const showKeyboard = ref(false);
        const inputType = ref<'number' | 'normal' | 'letter'>('number');

        // 处理键盘提交
        const handleSubmit = (value: string) => {
            inputValue.value = value;
            if (!inputValue.value.trim()) {
                ElMessageBox({
                    title: '提示！',
                    message: () => <span style={{ fontSize: '188%' }}>请输入手机号！</span>,
                    confirmButtonText: '确认',
                })
                return;
            }
            router.push({
                path: '/HomePage',
                query: { address: inputValue.value },
            });
        };

        // 点击输入框时显示键盘
        const handleInputClick = () => {
            showKeyboard.value = true;
        };

        const handleConfirm = () => {

        };

        onMounted(() => {
            // 获取ElInput的原生input元素
            const inputElement = addressInputRef.value?.$el.querySelector('input');
            if (inputElement) {
                inputElement.addEventListener('click', handleInputClick);
            }
        });

        onUnmounted(() => {
            // 移除事件监听器，防止内存泄漏
            const inputElement = addressInputRef.value?.$el.querySelector('input');
            if (inputElement) {
                inputElement.removeEventListener('click', handleInputClick);
            }
        });

        return () => (<>
            <UserInfo></UserInfo>
            <div class="address-input-container">
                <div class="title">
                    <div>
                        <BreadCrumb />
                    </div>
                </div>

                <ElInput
                    ref={addressInputRef}
                    type="number"
                    v-model={inputValue.value}
                    style={{
                        marginLeft: '30%',
                        marginTop: '10%',
                        width: '40%',
                        height: '7%',
                        border: '2px solid #ccc',
                        fontSize: '25px'
                    }}
                    size="large"
                    placeholder="请输入手机号，点击此处输入"
                    readonly
                /><br />
                {/*<button*/}
                {/*    style={{ marginLeft: '38%', marginTop: '2%' }}*/}
                {/*    onClick={handleConfirm}*/}
                {/*    class="confirm-btn"*/}
                {/*>*/}
                {/*    确认*/}
                {/*</button>*/}

            </div>
            <Keyboard
                modelValue={showKeyboard.value}
                value={inputValue.value}
                type={inputType.value}
                onUpdate:modelValue={(value) => showKeyboard.value = value}
                onUpdate:value={(value) => inputValue.value = value}
                onKeySubmit={handleSubmit}
            />
        </>);
    },
});
